<!DOCTYPE html>
<html>
<head>
    <title>p-V Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Define coordinates
    const origin = { x: 60, y: 460 };
    const pAxisEnd = { x: origin.x, y: 40 };
    const vAxisEnd = { x: 460, y: origin.y };

    const a = { x: 120, y: 400 };
    const b = { x: 420, y: 100 };
    const c = { x: a.x, y: b.y };
    const d = { x: b.x, y: a.y };

    // Function to draw an arrow
    function drawArrow(ctx, fromx, fromy, tox, toy) {
        const headlen = 10; // length of head in pixels
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
    }

    // --- Drawing ---

    ctx.beginPath();
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 1.5;

    // Draw axes
    drawArrow(ctx, origin.x, origin.y, vAxisEnd.x, vAxisEnd.y); // V-axis
    drawArrow(ctx, origin.x, origin.y, pAxisEnd.x, pAxisEnd.y); // p-axis
    
    ctx.stroke();

    // Draw axis labels
    ctx.fillStyle = 'black';
    ctx.font = 'italic 22px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('p', pAxisEnd.x - 25, pAxisEnd.y);
    ctx.fillText('V', vAxisEnd.x + 10, vAxisEnd.y + 20);
    ctx.fillText('O', origin.x - 20, origin.y + 20);

    // Draw rectangle acbd
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'black';
    ctx.strokeRect(c.x, c.y, b.x - c.x, d.y - c.y);

    // Draw rectangle labels
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('a', a.x - 15, a.y + 5);
    ctx.fillText('b', b.x + 15, b.y - 5);
    ctx.fillText('c', c.x - 15, c.y - 5);
    ctx.fillText('d', d.x + 15, d.y + 5);

    // Draw the curve from a to b
    ctx.beginPath();
    ctx.lineWidth = 2.5;
    ctx.strokeStyle = 'black';
    ctx.moveTo(a.x, a.y);
    // The curve in the image is concave down in the p-V plane (belly towards d).
    // In canvas coordinates, this corresponds to a curve that is concave up (bends downwards).
    // A quadratic Bezier curve with control point d = (b.x, a.y) creates this shape,
    // with the curve being tangent to 'ad' at 'a' and 'db' at 'b'.
    ctx.quadraticCurveTo(d.x, d.y, b.x, b.y);
    ctx.stroke();

</script>
</body>
</html>